<template>
	<div class="home">
		<el-row type="flex" class="top-examine" gutter="20" v-if="rolesArr.indexOf('common') < 0">
			<el-col :xs="24" :sm="12" :md="6" :lg="51" v-for="(item, index) in examineData" :key="index">
				<article>
					<router-link v-if="item.router" class="every" :to="{ path: '' + item.router + '', query: item.query ? item.query : '' }">
						<h3>{{ item.title }}</h3>
						<p>{{ item.count }}</p>
						<div class="img"><img :src="item.img" /></div>
					</router-link>
					<div v-else>
						<h3>{{ item.title }}</h3>
						<p>{{ item.count }}</p>
						<div class="img"><img :src="item.img" /></div>
					</div>
				</article>
			</el-col>
		</el-row>
		<el-row type="flex" :class="{ 'home-bottom': true, common: rolesArr.indexOf('common') < 0 ? false : true }" gutter="20">
			<el-col :xs="24" :sm="24" :md="24" :lg="54">
				<el-row type="flex" gutter="20" style="height: 100%;">
					<el-col :xs="24" :sm="24" :md="24" :lg="3" class="left-module">
						<section>
							<h3>常用应用</h3>
							<article>
								<el-row type="flex" class="fast-menu">
									<el-col :xs="4" :sm="4" :md="4" :lg="24" v-for="(item, index) in fastMenu" :key="index">
										<router-link class="every" :to="{ path: '' + item.router + '', query: { isSy: item.query ? item.query : '' } }">
											<div class="img"><img :src="item.img" /></div>
											<p>{{ item.name }}</p>
										</router-link>
									</el-col>
								</el-row>
							</article>
						</section>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="21" class="center-module">
						<el-row gutter="20">
							<el-col :xs="24" :sm="12" :md="12" :lg="12">
								<section class="charts-box charts-m-box">
									<div class="title">
										<h3>我的项目</h3>
										<div class="fast-query">
											<el-button size="small" :class="{ 'default-button': true, active: projectType === 1 ? true : false }" @click="changeProjectType(1)">
												本月
											</el-button>
											<el-button size="small" :class="{ 'default-button': true, active: projectType === 2 ? true : false }" @click="changeProjectType(2)">
												本季度
											</el-button>
											<el-button size="small" :class="{ 'default-button': true, active: projectType === 3 ? true : false }" @click="changeProjectType(3)">
												本年
											</el-button>
										</div>
									</div>
									<div class="chart-con" ref="one"></div>
								</section>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12">
								<section class="charts-box charts-m-box">
									<div class="title">
										<h3>我的申请</h3>
										<div class="fast-query">
											<el-button size="small" :class="{ 'default-button': true, active: applyType === 1 ? true : false }" @click="changeApplyType(1)">
												本月
											</el-button>
											<el-button size="small" :class="{ 'default-button': true, active: applyType === 2 ? true : false }" @click="changeApplyType(2)">
												本季度
											</el-button>
											<el-button size="small" :class="{ 'default-button': true, active: applyType === 3 ? true : false }" @click="changeApplyType(3)">
												本年
											</el-button>
										</div>
									</div>
									<div class="chart-con" ref="two"></div>
								</section>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12">
								<section class="charts-box">
									<div class="title">
										<h3>工作汇报</h3>
										<div class="fast-query">
											<el-button size="small" :class="{ 'default-button': true, active: reportType === 1 ? true : false }" @click="changeReportType(1)">
												本月
											</el-button>
											<el-button size="small" :class="{ 'default-button': true, active: reportType === 2 ? true : false }" @click="changeReportType(2)">
												本季度
											</el-button>
											<el-button size="small" :class="{ 'default-button': true, active: reportType === 3 ? true : false }" @click="changeReportType(3)">
												本年
											</el-button>
										</div>
									</div>
									<div class="chart-con" ref="three"></div>
								</section>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12">
								<section class="charts-box">
									<div class="title">
										<h3>客户跟进</h3>
										<div class="fast-query" v-if="rolesArr.indexOf('common') < 0">
											<el-select v-model="projectPersonId" placeholder="负责人" clearable style="width: 120px" @change="getProjectFollowFn">
												<el-option label="全部" value="" />
												<el-option v-for="person in projectPerson" :key="person.userId" :label="person.userName" :value="person.userId" />
											</el-select>
										</div>
									</div>
									<div class="chart-con" ref="four"></div>
								</section>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="51" class="right-module">
				<section>
					<h3>{{ rolesArr.indexOf('common') < 0 ? '成员考勤' : '我的考勤' }}</h3>
					<h6 v-if="isZjl">{{ date }} {{ getDay }}</h6>
					<article class="myart">
						<el-row v-if="isZjl" type="flex" class="kq-detail tH" gutter="20">
							<el-col class="dpxs" :xs="24" :sm="8" :md="8" :lg="24" v-for="(item, index) in kqData">
								<div class="day-detail">
									<h4>{{ item.time }}</h4>

									<el-row gutter="20" style="display: flex;justify-content: space-between;">
										<el-col class="month-info " :xs="6" :sm="12" :md="12" :lg="6">
											<p class="topP" :class="{ active1: item.normal > 0 ? true : false }">{{ item.normal > 0 ? item.normal : '0' }}</p>
											<p>正常</p>
										</el-col>
										<el-col v-if="item.type == 'on'" class="month-info " :xs="6" :sm="12" :md="12" :lg="6">
											<p class="topP" :class="{ active2: item.late > 0 ? true : false }">{{ item.late > 0 ? item.late : '0' }}</p>
											<p>迟到</p>
										</el-col>
										<el-col class="month-info " :xs="6" :sm="12" :md="12" :lg="6">
											<p class="topP" :class="{ active3: item.defect > 0 ? true : false }">{{ item.defect > 0 ? item.defect : '0' }}</p>
											<p>缺卡</p>
										</el-col>
										<el-col class="month-info " :xs="6" :sm="12" :md="12" :lg="6">
											<p class="topP" :class="{ active4: item.absence > 0 ? true : false }">{{ item.absence > 0 ? item.absence : '0' }}</p>
											<p>请假</p>
										</el-col>
									</el-row>
								</div>
							</el-col>
						</el-row>
						<el-row v-else type="flex" class="kq-detail" gutter="20">
							<el-col :xs="24" :sm="8" :md="8" :lg="24">
								<h6>{{ date }} {{ getDay }}</h6>
								<div class="day-detail">
									<el-row gutter="20">
										<el-col class="every" :xs="6" :sm="12" :md="12" :lg="24">
											<p>
												<block v-if="attendanceInfo.todayList && attendanceInfo.todayList[0]">
													<b
														:class="{
															active:
																attendanceInfo.todayList[0].status === 1 ||
																attendanceInfo.todayList[0].status === 2 ||
																attendanceInfo.todayList[0].status === 3,
															no: attendanceInfo.todayList[0].status === 0
														}"
													></b>
												</block>
												<block v-else><b class="no"></b></block>
												上班（{{ attendanceInfo.shift ? attendanceInfo.shift.startTime1 : '--' }}）
											</p>

											<p v-if="attendanceInfo.todayList && attendanceInfo.todayList[0]">
												<block v-if="attendanceInfo.todayList[0].status === 0"><span class="no">未打卡</span></block>

												<block v-if="attendanceInfo.todayList[0].status === 1"><span class="yc">缺卡</span></block>

												<block v-if="attendanceInfo.todayList[0].status === 3"><span class="yc">请假</span></block>

												<block v-if="attendanceInfo.todayList[0].status === 2 || attendanceInfo.todayList[0].status === 4">
													<span class="yc" style="margin-right: 5px;" v-if="attendanceInfo.todayList[0].status === 2">迟到</span>
													<span :class="{ time: true, active: attendanceInfo.todayList[0].status === 2 ? true : false }">
														{{ attendanceInfo.todayList[0].punchCardTime ? attendanceInfo.todayList[0].punchCardTime.split(' ')[1].slice(0, -3) : '' }}
													</span>
													<span class="type">{{ attendanceInfo.todayList[0].sourceType ? sourceName[attendanceInfo.todayList[0].sourceType] : '' }}</span>
												</block>
											</p>
											<p v-else>--</p>
										</el-col>
										<el-col class="every" :xs="6" :sm="12" :md="12" :lg="24">
											<p>
												<block v-if="attendanceInfo.todayList && attendanceInfo.todayList[1]">
													<b
														:class="{
															active:
																attendanceInfo.todayList[1].status === 1 ||
																attendanceInfo.todayList[1].status === 2 ||
																attendanceInfo.todayList[1].status === 3,
															no: attendanceInfo.todayList[1].status === 0
														}"
													></b>
												</block>
												<block v-else><b class="no"></b></block>
												下班（{{ attendanceInfo.shift ? attendanceInfo.shift.endTime1 : '--' }}）
											</p>

											<p v-if="attendanceInfo.todayList && attendanceInfo.todayList[1]">
												<block v-if="attendanceInfo.todayList[1].status === 0"><span class="no">未打卡</span></block>

												<block v-if="attendanceInfo.todayList[1].status === 1"><span class="yc">缺卡</span></block>

												<block v-if="attendanceInfo.todayList[1].status === 3"><span class="yc">请假</span></block>

												<block v-if="attendanceInfo.todayList[1].status === 2 || attendanceInfo.todayList[1].status === 4">
													<span class="yc" style="margin-right: 5px;" v-if="attendanceInfo.todayList[1].status === 2">迟到</span>
													<span :class="{ time: true, active: attendanceInfo.todayList[1].status === 2 ? true : false }">
														{{ attendanceInfo.todayList[1].punchCardTime ? attendanceInfo.todayList[1].punchCardTime.split(' ')[1].slice(0, -3) : '' }}
													</span>
													<span class="type">{{ attendanceInfo.todayList[1].sourceType ? sourceName[attendanceInfo.todayList[1].sourceType] : '' }}</span>
												</block>
											</p>
											<p v-else>--</p>
										</el-col>
										<el-col class="every" :xs="6" :sm="12" :md="12" :lg="24">
											<p>
												<block v-if="attendanceInfo.todayList && attendanceInfo.todayList[2]">
													<b
														:class="{
															active:
																attendanceInfo.todayList[2].status === 1 ||
																attendanceInfo.todayList[2].status === 2 ||
																attendanceInfo.todayList[2].status === 3,
															no: attendanceInfo.todayList[2].status === 0
														}"
													></b>
												</block>
												<block v-else><b class="no"></b></block>
												上班（{{ attendanceInfo.shift ? attendanceInfo.shift.startTime2 : '--' }}）
											</p>

											<p v-if="attendanceInfo.todayList && attendanceInfo.todayList[2]">
												<block v-if="attendanceInfo.todayList[2].status === 0"><span class="no">未打卡</span></block>

												<block v-if="attendanceInfo.todayList[2].status === 1"><span class="yc">缺卡</span></block>

												<block v-if="attendanceInfo.todayList[2].status === 3"><span class="yc">请假</span></block>

												<block v-if="attendanceInfo.todayList[2].status === 2 || attendanceInfo.todayList[2].status === 4">
													<span class="yc" style="margin-right: 5px;" v-if="attendanceInfo.todayList[2].status === 2">迟到</span>
													<span :class="{ time: true, active: attendanceInfo.todayList[1].status === 2 ? true : false }">
														{{ attendanceInfo.todayList[2].punchCardTime ? attendanceInfo.todayList[2].punchCardTime.split(' ')[1].slice(0, -3) : '' }}
													</span>
													<span class="type">{{ attendanceInfo.todayList[2].sourceType ? sourceName[attendanceInfo.todayList[2].sourceType] : '' }}</span>
												</block>
											</p>
											<p v-else>--</p>
										</el-col>
										<el-col class="every" :xs="6" :sm="12" :md="12" :lg="24">
											<p>
												<block v-if="attendanceInfo.todayList && attendanceInfo.todayList[3]">
													<b
														:class="{
															active:
																attendanceInfo.todayList[3].status === 1 ||
																attendanceInfo.todayList[3].status === 2 ||
																attendanceInfo.todayList[3].status === 3,
															no: attendanceInfo.todayList[3].status === 0
														}"
													></b>
												</block>
												<block v-else><b class="no"></b></block>
												下班（{{ attendanceInfo.shift ? attendanceInfo.shift.endTime2 : '--' }}）
											</p>

											<p v-if="attendanceInfo.todayList && attendanceInfo.todayList[3]">
												<block v-if="attendanceInfo.todayList[3].status === 0"><span class="no">未打卡</span></block>

												<block v-if="attendanceInfo.todayList[3].status === 1"><span class="yc">缺卡</span></block>

												<block v-if="attendanceInfo.todayList[3].status === 3"><span class="yc">请假</span></block>

												<block v-if="attendanceInfo.todayList[3].status === 2 || attendanceInfo.todayList[3].status === 4">
													<span class="yc" style="margin-right: 5px;" v-if="attendanceInfo.todayList[3].status === 2">迟到</span>
													<span :class="{ time: true, active: attendanceInfo.todayList[3].status === 2 ? true : false }">
														{{ attendanceInfo.todayList[3].punchCardTime ? attendanceInfo.todayList[3].punchCardTime.split(' ')[1].slice(0, -3) : '' }}
													</span>
													<span class="type">{{ attendanceInfo.todayList[3].sourceType ? sourceName[attendanceInfo.todayList[3].sourceType] : '' }}</span>
												</block>
											</p>
											<p v-else>--</p>
										</el-col>
									</el-row>
								</div>
							</el-col>
							<el-col :xs="24" :sm="8" :md="8" :lg="24">
								<h6>本周</h6>
								<div class="week-detail">{{ attendanceInfo.weekAttendance ? attendanceInfo.weekAttendance : '--' }}</div>
							</el-col>
							<el-col :xs="24" :sm="8" :md="8" :lg="24">
								<h6>本月</h6>
								<div class="day-detail">
									<el-row gutter="20">
										<el-col class="month-info" :xs="6" :sm="12" :md="12" :lg="6">
											<p :class="{ active: attendanceInfo.monthLateNum > 0 ? true : false }">
												{{ attendanceInfo.monthLateNum > 0 ? attendanceInfo.monthLateNum : '0' }}
											</p>
											<p>迟到</p>
										</el-col>
										<el-col class="month-info" :xs="6" :sm="12" :md="12" :lg="6">
											<p :class="{ active: attendanceInfo.monthDefectNum > 0 ? true : false }">
												{{ attendanceInfo.monthDefectNum > 0 ? attendanceInfo.monthDefectNum : '0' }}
											</p>
											<p>缺卡</p>
										</el-col>
										<el-col class="month-info" :xs="6" :sm="12" :md="12" :lg="6">
											<p :class="{ active: attendanceInfo.monthAbsence > 0 ? true : false }">
												{{ attendanceInfo.monthAbsence > 0 ? attendanceInfo.monthAbsence : '0' }}
											</p>
											<p>请假</p>
										</el-col>
										<el-col class="month-info" :xs="6" :sm="12" :md="12" :lg="6">
											<p :class="{ active: attendanceInfo.monthOverwork > 0 ? true : false }">
												{{ attendanceInfo.monthOverwork > 0 ? attendanceInfo.monthOverwork : '0' }}
											</p>
											<p>加班</p>
										</el-col>
									</el-row>
								</div>
							</el-col>
						</el-row>
					</article>
				</section>
			</el-col>
		</el-row>
	</div>
</template>

<script setup name="Index">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import useUserStore from '@/store/modules/user';
import { getNotHandle, getMyProject, getMyApply, getReport, getProjectPersonOption, getProjectFollow, getAttendance } from '@/api/index/index';
import moment from 'moment';
import examineQj from '@/assets/images/examine_qj.png';
import examineJb from '@/assets/images/examine_jb.png';
import examineBk from '@/assets/images/examine_bk.png';
import examineFk from '@/assets/images/examine_fk.png';
import examineHb from '@/assets/images/examine_hb.png';
import fastQj from '@/assets/images/fast_qj.png';
import fastJb from '@/assets/images/fast_jb.png';
import fastRb from '@/assets/images/fast_rb.png';
import fastHb from '@/assets/images/fast_hb.png';
import fastSz from '@/assets/images/fast_sz.png';
import fastXm from '@/assets/images/fast_xm.png';
import { dataset } from 'dom7';

const version = ref('3.8.5');
const one = ref(null);
const two = ref(null);
const three = ref(null);
const four = ref(null);
const projectType = ref(1);
const applyType = ref(1);
const reportType = ref(1);
const isZjl = ref(false);
const rolesArr = ref(useUserStore().roles);
let chartOne = ref(null);
let chartTwo = ref(null);
let chartThree = ref(null);
let chartFour = ref(null);
let day = ref(['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']);
let getDay = ref('');
let date = ref('');
let kqData = ref([{ state: 1 }, { state: 2 }, { state: 3 }, { state: 4 }]);
date.value = moment().format('MM月DD日');
getDay.value = day.value[new Date().getDay()];
const data = reactive({
	examineData: {
		absenceNum: {
			title: '请假待审核',
			count: '--',
			img: examineQj,
			router: 'attendance/attendanceApproval',
			query: { type: 'approve' }
		},
		overworkNum: {
			title: '加班待审核',
			count: '--',
			img: examineJb,
			router: 'workovertime/approval'
		},
		reissueNum: {
			title: '补卡待审核',
			count: '--',
			img: examineBk,
			router: 'attendance/repairAttendance'
		},
		visitorNum: {
			title: '访客待审核',
			count: '--',
			img: examineFk
		},
		noReadNum: {
			title: '工作汇报待读',
			count: '--',
			img: examineHb,
			router: 'daily/workReport'
		}
	},
	fastMenu: [
		{
			name: '我要请假',
			img: fastQj,
			router: '/attendance/attendanceApply',
			query: true
		},
		{
			name: '申请加班',
			img: fastJb,
			router: '/workovertime/apply',
			query: true
		},
		{
			name: '发布日报',
			img: fastRb,
			router: '/daily/addUpdDaily',
			query: true
		},
		{
			name: '工作汇报',
			img: fastHb,
			router: '/daily/workReport',
			query: true
		},
		{
			name: '项目管理',
			img: fastXm,
			router: '/projectManagement'
		}
	],
	projectPerson: [],
	projectPersonId: undefined,
	statusName: {
		0: '未打卡',
		1: '缺卡',
		2: '迟到',
		3: '请假',
		4: '正常'
	},
	sourceName: {
		HK: '门禁打卡',
		IN: '内勤打卡',
		OUT: '外勤打卡',
		CAMERA: '摄像头打卡'
	},
	attendanceInfo: {}
});

const { examineData, fastMenu, projectPerson, projectPersonId, statusName, attendanceInfo, sourceName } = toRefs(data);
const color = [];
const colorTwo = ['#1AC45F', '#FA6400', '#BE1A21'];
const colorTwoBg = ['rgba(237, 251, 243, 1)', 'rgba(255, 243, 235, 1)', 'rgba(255, 233, 235, 1)'];
const colorThree = ['#FFABB3', '#BE1A21'];

window.onresize = function() {
	chartOne.resize();
	chartTwo.resize();
	chartThree.resize();
	chartFour.resize();
};
function goTarget(url) {
	window.open(url, '__blank');
}
// 项目负责人
function getProjectPersonOptionFn() {
	getProjectPersonOption().then(response => {
		projectPerson.value = response.data;
	});
}
// 我的待办
function getNotHandleFn() {
	getNotHandle().then(response => {
		let _data = response.data;
		for (let key in _data) {
			examineData.value[key].count = _data[key];
		}
	});
}
// 我的项目
function getMyProjectFn() {
	getMyProject({
		type: projectType.value
	}).then(response => {
		let _data = response.data;
		let nameArr = [];
		let dataArr = [];
		for (let i = 0; i < _data.length; i++) {
			let name = _data[i].name;
			let num = _data[i].num;
			if (name == '未启动') {
				color[0] = '#999999';
				nameArr[0] = name;
				dataArr[0] = num;
			} else if (name == '进行中') {
				color[1] = '#1AC45F';
				nameArr[1] = name;
				dataArr[1] = num;
			} else if (name == '已暂停') {
				color[2] = '#1890FF';
				nameArr[2] = name;
				dataArr[2] = num;
			} else if (name == '待验收') {
				color[3] = '#BE1A21';
				nameArr[3] = name;
				dataArr[3] = num;
			} else if (name == '已完成') {
				color[4] = '#FA6400';
				nameArr[4] = name;
				dataArr[4] = num;
			}
		}
		drawChartOne(nameArr, [
			{
				data: dataArr,
				type: 'bar',
				barWidth: 20,
				itemStyle: {
					color: params => {
						return color[params.dataIndex];
					},
					barBorderRadius: [20, 20, 20, 20]
				},
				label: {
					show: true,
					position: 'top',
					formatter: params => {
						let str = '';
						if (params.dataIndex === 0) {
							str += `{a|${params.value}}`;
						}
						if (params.dataIndex === 1) {
							str += `{b|${params.value}}`;
						}
						if (params.dataIndex === 2) {
							str += `{c|${params.value}}`;
						}
						if (params.dataIndex === 3) {
							str += `{d|${params.value}}`;
						}
						if (params.dataIndex === 4) {
							str += `{e|${params.value}}`;
						}
						return str;
					},
					rich: {
						a: {
							color: color[0]
						},
						b: {
							color: color[1]
						},
						c: {
							color: color[2]
						},
						d: {
							color: color[3]
						},
						e: {
							color: color[4]
						}
					},
					textStyle: {
						fontSize: 14
					}
				}
			}
		]);
	});
}
// 我的申请
function getMyApplyFn() {
	getMyApply({
		type: applyType.value
	}).then(response => {
		let _data = response.data;
		let chartData = [{ name: '已通过', value: _data.agreeNum }, { name: '待审核', value: _data.noAuditNum }, { name: '不通过', value: _data.refuseNum }];

		drawChartTwo(chartData);
	});
}
// 工作汇报
function getReportFn() {
	getReport({
		type: reportType.value
	}).then(response => {
		let _data = response.data;
		drawChartThree([{ value: _data.createNum, name: '我发送的' }, { value: _data.getNum, name: '我收到的' }]);
	});
}
// 项目跟进
function getProjectFollowFn() {
	if (rolesArr.value.indexOf('common') < 0) {
		getProjectFollow({
			userId: projectPersonId.value
		}).then(response => {
			let _data = response.data;
			drawChartFour(_data.monthArr, _data.dataArr);
		});
	} else {
		drawChartFour(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
	}
}
// 我的考勤
function getAttendanceFn() {
	getAttendance().then(response => {
		attendanceInfo.value = response.data;
		if (response.data.todayList) {
			response.data.todayList.reverse();
		}
		if (response.data.todayAttendance) {
			isZjl.value = true;
			for (let i = 0; i < kqData.value.length; i++) {
				kqData.value[i] = response.data.todayAttendance[i] ? response.data.todayAttendance[i] : kqData.value[i];
				if (kqData.value[i].state == 1) {
					kqData.value[i].time = '上班' + '\xa0\xa0' + '(' + attendanceInfo.value.shift.startTime1 + ')';
					kqData.value[i].type = 'on';
				} else if (kqData.value[i].state == 2) {
					kqData.value[i].time = '下班' + '\xa0\xa0' + '(' + attendanceInfo.value.shift.endTime1 + ')';
					kqData.value[i].type = 'off';
				} else if (kqData.value[i].state == 3) {
					kqData.value[i].time = '上班' + '\xa0\xa0' + '(' + attendanceInfo.value.shift.startTime2 + ')';
					kqData.value[i].type = 'on';
				} else {
					kqData.value[i].time = '下班' + '\xa0\xa0' + '(' + attendanceInfo.value.shift.endTime2 + ')';
					kqData.value[i].type = 'off';
				}
			}
		} else {
			isZjl.value = false;
		}
	});
}

function changeProjectType(type) {
	if (projectType.value !== type) {
		projectType.value = type;
		getMyProjectFn();
	}
}
function changeApplyType(type) {
	if (applyType.value !== type) {
		applyType.value = type;
		getMyApplyFn();
	}
}
function changeReportType(type) {
	if (reportType.value !== type) {
		reportType.value = type;
		getReportFn();
	}
}
function drawChartOne(xData, yData) {
	chartOne = echarts.init(one.value, 'macarons');
	chartOne.setOption({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				// 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			top: 30,
			left: '2%',
			right: '2%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				data: xData,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				splitLine: {
					lineStyle: {
						type: 'dashed'
					}
				},
				axisTick: {
					show: false
				}
			}
		],
		series: yData
	});
}

function drawChartTwo(chartData) {
	chartTwo = echarts.init(two.value, 'macarons');
	let sum = 0;
	let pieSeries = [];

	// 数据处理
	chartData.forEach((v, i) => {
		sum = sum + v.value;
	});
	if (sum == 0) {
		sum = 1;
	}

	// 图表option整理
	chartData.forEach((v, i) => {
		pieSeries.push({
			name: '',
			type: 'pie',
			clockWise: true,
			hoverAnimation: false,
			radius: [70 - i * 20 + '%', 58 - i * 20 + '%'],
			center: ['35%', '52%'],
			label: {
				show: false
			},
			itemStyle: {
				borderRadius: 20
			},
			data: [
				{
					value: v.value,
					name: v.name,
					itemStyle: {
						normal: {
							borderWidth: 0,
							borderColor: colorTwo[i]
						}
					}
				},
				{
					value: sum - v.value,
					name: '',
					itemStyle: {
						color: 'rgba(0,0,0,0)'
					}
				}
			]
		});
		pieSeries.push({
			name: '',
			type: 'pie',
			silent: true,
			z: 1,
			clockWise: true, //顺时加载
			hoverAnimation: false, //鼠标移入变大
			radius: [70 - i * 20 + '%', 58 - i * 20 + '%'],
			center: ['35%', '52%'],
			label: {
				show: false
			},
			itemStyle: {
				borderCap: 'round',
				borderJoin: 'round'
			},
			data: [
				{
					value: sum,
					itemStyle: {
						color: colorTwoBg[i]
					}
				}
			]
		});
		v.percent = ((v.value / sum) * 100).toFixed(1) + '%';
	});

	chartTwo.setOption({
		color: colorTwo,
		grid: {
			top: '17%',
			bottom: '57%',
			left: '10%',
			containLabel: false
		},
		legend: {
			show: true,
			right: '10%',
			top: 'middle',
			itemWidth: 10,
			itemHeight: 10,
			// itemGap:  20,
			// textStyle: {
			// 	fontSize:  16,
			// 	color:  '#000',
			// },
			textStyle: {
				color: '#fff',
				fontSize: 13,
				rich: {
					a0: { color: colorTwo[0], align: 'center', fontSize: 16, fontWeight: 'bold' },
					a1: { color: colorTwo[1], align: 'center', fontSize: 16, fontWeight: 'bold' },
					a2: { color: colorTwo[2], align: 'center', fontSize: 16, fontWeight: 'bold' },
					b: { color: '#333' }
				}
			},
			formatter: name => {
				if (chartData.length) {
					var target;
					var index;
					for (var i = 0, l = chartData.length; i < l; i++) {
						if (chartData[i].name == name) {
							target = chartData[i].value;
							index = i;
						}
					}
					return `{b|${name}}{a${index}|   ${target}}`;
				}
			}
		},
		series: pieSeries
	});
}

function drawChartThree(data) {
	chartThree = echarts.init(three.value, 'macarons');
	chartThree.setOption({
		color: colorThree,
		tooltip: {
			trigger: 'item'
		},
		series: [
			{
				type: 'pie',
				radius: ['40%', '70%'],
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				center: ['50%', '55%'],
				emphasis: {
					label: {
						show: true,
						fontSize: 14,
						fontWeight: 'bold'
					}
				},
				data: data
			}
		]
	});
}

function drawChartFour(xData, yData) {
	chartFour = echarts.init(four.value, 'macarons');
	chartFour.setOption({
		grid: {
			left: '0%',
			right: '0%',
			top: '40',
			bottom: '2%',
			containLabel: true
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'line',
				lineStyle: {
					color: 'rgba(192, 34, 41, 1)'
				}
			}
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: 1,
				axisLine: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},

				data: xData
			}
		],
		yAxis: [
			{
				type: 'value',
				name: '单位/次',
				padding: 5,
				splitLine: {
					lineStyle: {
						type: 'dashed'
					}
				},
				axisLine: {
					show: false
				},
				axisLabel: {
					show: true,
					margin: 10
				},
				axisTick: {
					show: false
				}
			}
		],
		series: [
			{
				type: 'line',
				smooth: true,
				stack: '总量',
				symbolSize: 5,
				showSymbol: false,
				itemStyle: {
					normal: {
						color: '#BE1A21',
						lineStyle: {
							color: '#BE1A21',
							width: 2
						}
					}
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
							0,
							0,
							0,
							1,
							[
								{
									offset: 0,
									color: 'rgba(192, 34, 41, 0.4)'
								},
								{
									offset: 1,
									color: 'rgba(224, 56, 69, 0)'
								}
							],
							false
						)
					}
				},
				data: yData
			}
		]
	});
}
onMounted(() => {
	getProjectPersonOptionFn();
	getNotHandleFn();
	getMyProjectFn();
	getMyApplyFn();
	getReportFn();
	getProjectFollowFn();
	getAttendanceFn();
});
</script>

<style scoped lang="scss">
.home {
	height: calc(100vh - 136px);
	overflow: auto;
	font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #333;
	overflow-x: hidden;
	h3,
	h6 {
		margin: 0;
		font-weight: bold;
		font-size: 18px;
	}
	h6 {
		font-size: 16px;
	}
	@media only screen and (min-width: 1200px) {
		.el-col-lg-51 {
			display: block;
			max-width: 20%;
			flex: 0 0 20%;
		}
		.el-col-lg-54 {
			display: block;
			max-width: 80%;
			flex: 0 0 80%;
		}
		.left-module section,
		.right-module section {
			height: 100%;
		}
		.left-module section article {
			height: calc(100% - 80px);
			.every {
				height: 16.6667%;
			}
		}
		.left-module,
		.right-module {
			height: calc(100vh - 248px);
		}
		.common .left-module,
		.common .right-module {
			height: calc(100vh - 138px);
		}
		.left-module,
		.right-module {
			overflow: auto;
		}
	}
	@media only screen and (max-width: 1200px) {
		.left-module {
			margin-bottom: 20px;
		}
		.charts-box {
			margin-bottom: 20px;
		}
	}
	.top-examine {
		display: flex;
		article {
			margin-bottom: 20px;
			position: relative;
			background: #fff;
			border-radius: 8px;
			padding: 0 80px 0 20px;
			height: 90px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.img {
				position: absolute;
				right: 20px;
				width: 60px;
				height: 100%;
				top: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				img {
					height: 60px;
				}
			}
			p {
				color: #be1a21;
				font-weight: bold;
				font-size: 20px;
				margin: 0;
				padding-top: 10px;
			}
		}
	}
	.home-bottom {
		//height: calc( 100% - 110px );
		.left-module {
			section {
				background: #fff;
				border-radius: 10px;
				h3 {
					height: 80px;
					line-height: 80px;
					text-align: center;
				}
				article {
					overflow: auto;
					.fast-menu {
						height: 100%;
					}
					.every {
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						cursor: pointer;
						.img {
							height: 50px;
							img {
								height: 100%;
							}
						}
						p {
							font-weight: bold;
						}
					}
				}
			}
		}
		.center-module {
			.charts-box {
				// height: 100%;
				background: #fff;
				border-radius: 10px;
				padding: 20px;
				// display: flex;
				// flex-direction: column;
				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;
				}
				.fast-query {
					position: absolute;
					top: 0;
					right: 0;
				}
				.chart-con {
					height: calc(50vh - 194px);
				}
			}
			.charts-box.charts-m-box {
				margin-bottom: 20px;
			}
			.default-button {
				background: #ffdade;
				color: #be1a21;
				border: none;
			}
			.default-button.active {
				background: #be1a21;
				color: #ffffff;
			}
		}
		.right-module {
			section {
				background: #fff;
				border-radius: 10px;
				padding: 0 30px;
				height: 100%;
				padding-bottom: 20px;
				overflow: auto;
				h3 {
					height: 70px;
					padding-top: 36px;
					padding-bottom: 14px;
				}
				h6 {
					height: 50px;
					line-height: 50px;
				}
				.day-detail {
					background-color: #f5f5f5;
					border-radius: 10px;
					padding: 0 30px;
					.every {
						p:nth-child(1) {
							font-weight: bold;
							position: relative;
							white-space: nowrap;
							b {
								position: absolute;
								width: 6px;
								height: 6px;
								left: -14px;
								top: 7px;
								border-radius: 50%;
								background: #1ac45f;
							}
							b.active {
								background: #be1a21;
							}
							b.no {
								background: #aaa;
							}
						}
						.time {
							color: #1ac45f;
						}
						.time.active,
						.yc {
							color: #be1a21;
						}
						.type {
							color: #aaaaaa;
							margin-left: 10px;
						}
						.no {
							color: #aaaaaa;
						}
					}
				}
				.week-detail {
					background-color: #f5f5f5;
					border-radius: 10px;
					text-align: center;
					padding: 20px 0;
					color: #be1a21;
					font-weight: bold;
				}
				.month-info {
					p {
						text-align: center;
						font-weight: bold;
					}
					p.active {
						color: #be1a21;
					}
					p:nth-child(1) {
						font-size: 18px;
						white-space: nowrap;
					}
				}
			}
		}
	}
}
.common .chart-con {
	height: calc(50vh - 140px) !important;
}
::-webkit-scrollbar {
	display: none;
	/* Chrome Safari */
}
.myart {
	.tH {
		p {
			color: #999999;
			margin-top: 5px;
		}
		height: 100%;
	}
	.topP {
		margin-top: 20px !important;
		margin-bottom: 0;
	}
}
h4 {
	padding-top: 20px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}
.active1 {
	color: #1ac45f !important;
}
.active2 {
	color: #FA6400 !important;
}

.active3 {
	color: #be1a21 !important;
}
.active4 {
	color: #1e1e1e !important;
}
.dpxs {
	margin-bottom: 19px;
}
</style>
